import { Modal, Steps, Form, Row, message, Button, Popconfirm } from 'antd';
import React, { useState, useCallback, useEffect } from 'react';
import { useRequest } from '@umijs/hooks';
import Step1 from './Step1'
import Step2 from './Step2'
import { fomatFormData } from '@/utils/utils'
import { getRoleList, aoSelectedRoleList, setingPermission } from '../../service';

const DataPermission = ({
  visible,
  onClose,
  selectRowId,
  form
}) => {

  const formLayout = {
    labelCol: { span: 6 },
    wrapperCol: { span: 18 },
  };
  const [step, setStep] = useState(0);
  const [loading, setloading] = useState(false);
  const [selectPlatform, setselectPlatform] = useState('');
  const [permissionTargetKeys, setpermissionTargetKeys] = useState([]);
  const [permissionData, setpermissionData] = useState([]);
  const { loading: leftLoading, run: getRoleListRequest } = useRequest(values => getRoleList({
    current: 1,
    pageSize: 999
  }), {
    manual: true,
    onSuccess(res) {
      requestUrlMap[selectPlatform]();
      let data = res.data.map(item => ({ ...item, key: item.id }))
      setpermissionData(data);
    },
  });
  const { loading: rightLoading, run: aoSelectedRoleListRequest } = useRequest(id => aoSelectedRoleList({
    roleId: selectRowId,
  }), {
    manual: true,
    onSuccess(res) {
      let keys = res.map(item => item.permissionsRoleId)
      setpermissionTargetKeys(keys);
      setStep(step + 1);
    },
  });
  const { loading: saveLoading, run: setingPermissionPost } = useRequest(params => setingPermission(fomatFormData(params)), {
    manual: true,
    onSuccess(res) {
      onClose();
      message.success('修改成功');
    },
  });
  const requestUrlMap = {
    ao: aoSelectedRoleListRequest//辅营产品子平台
  }
  const save = () => {
    let params = {
      dataRoleId: permissionTargetKeys.toString(),
      permissionType: selectPlatform,
      roleId: selectRowId
    }
    setingPermissionPost(params)
  }
  const nextStep = () => {
    if (step === 0) {
      if (selectPlatform !== '') {
        getRoleListRequest();
      } else {
        message.info('请勾选一项数据');
      }
    }
  }
  const changePermission = (nextTargetKeys, direction, moveKeys) => {
    setpermissionTargetKeys(nextTargetKeys)
  }
  const renderStep = (currentStep) => {
    if (currentStep === 0) {
      return <Step1 selectPlatform={selectPlatform} changePlatform={(value) => { setselectPlatform(value) }} />
    } else if (currentStep === 1) {
      return <Step2
        dataSource={permissionData}
        targetKeys={permissionTargetKeys}
        onChange={changePermission}
      />
    }
  }

  const onChangeStep = useCallback(
    current => {
      if (step > current) {
        setStep(current);
      }
    },
    [step],
  );
  return (
    <Modal
      visible={visible}
      title={'数据权限'}
      width={'50%'}
      onCancel={onClose}
      footer={
        [
          step === 0 && (
            <Button key="next" loading={leftLoading || rightLoading} onClick={nextStep}>
              下一步
            </Button>
          ),
          step === 1 && (
            <Button key="pre" onClick={() => setStep(pre => pre - 1)}>
              上一步
            </Button>
          ),
          step === 1 && (
            <Button key="save" type="primary" loading={saveLoading} onClick={save}>
              保存
            </Button>
          ),
        ]
      }
      bodyStyle={{ minHeight: '50vh', display: 'flex', flexDirection: 'column', transition: 'all 0.5s' }}
    >
      <Row type="flex" style={{ flexDirection: 'row' }}>
        <div style={{ borderRight: '1px solid #e2e2e2' }}>
          <Steps
            progressDot
            direction="vertical"
            labelPlacement="vertical"
            current={step}
            onChange={onChangeStep}
            style={{ marginBottom: 24 }}
          >
            <Steps.Step title="业务选择" description={<div style={{ height: 60 }} />} />
            <Steps.Step title="数据权限" description={<div style={{ height: 60 }} />} />
          </Steps>
        </div>
        <div style={{ paddingLeft: '20px' }}>{renderStep(step)}
        </div>
      </Row>
    </Modal>
  );
};

export default Form.create()(DataPermission);
